<template>
	<view>
		<image class="image-bg" :src="srcX()"></image>
		<view class="page-bg">
			<form @submit="saveFormId">
				<view class="sub-bg">
					<image class="avater" :src="avatarUrl"></image>
					<view class="tip">填写真实信息，以便自主认证</view>
					<view>
						<view class="section">
							<input @input="gainName" placeholder="您的真实姓名" name="name" placeholderClass="placeholder" type="text" :value="name"></input>
						</view>
						<view class="section">
							<input @input="gainPhone" maxlength="11" name="phone" placeholder="您的手机号" placeholderClass="placeholder" type="number"></input>
						</view>
						<view class="section">
							<input @input="gainCode" maxlength="6" name="code" placeholder="请输入验证码" placeholderClass="placeholder" type="number"
							 style="width: 200rpx;" />
							<view class="send-code-btn" @click="sendSmsCode">{{codeDuration ? codeDuration + 's' : '获取验证码' }}></view>
						</view>
						<view>
							<button class="next" formType="submit">提 交</button>
						</view>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>


<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				type: 1,
				codeDuration: 0,
				code: "",
				verifycode: "",
				realname: "",
				mobile: "",
				name: "", //注册的姓名
				phone: "", //注册的电话
			}
		},
		computed: {
			...mapState(['nickName', 'avatarUrl', 'openid', 'gender'])
		},
		onLoad: function(options) {
			//设置选则最大时间(当前年)
			this.type = options.type;
			console.log("type:", options.type);
		},
		methods: {
			...mapMutations(['setUser']),
			//获取名字
			gainName(e) {
				console.log(e.detail.value)
				let that = this
				that.name = e.detail.value
			},

			//获取手机号
			gainPhone(e) {
				//console.log(e.detail.value)
				let that = this
				that.phone = e.detail.value
			},

			//获取验证码
			gainCode(e) {
				//console.log(e.detail.value)
				let that = this
				that.code = e.detail.value
			},

			sendSmsCode() {
				let that = this;
				if (that.codeDuration) {
					uni.showModal({
						content: `请在${that.codeDuration}秒后重试`,
						showCancel: false
					})
				}
				if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(that.phone)) {
					uni.showModal({
						content: '手机号码填写错误',
						showCancel: false
					})
					return
				}
				var params = {
					url: "users/getVerifyCode",
					type: 'POST',
					data: {
						phone: that.phone
					},
					sCallback: function(res) {
						console.log(res);
						if (res.resp.code == "OK") {
							uni.showModal({
								content: '验证码发送成功，请注意查收',
								showCancel: true
							})
							that.codeDuration = 60;
							that.verifycode = res.code;
							that.codeInterVal = setInterval(() => {
								that.codeDuration--
								if (that.codeDuration === 0) {
									if (that.codeInterVal) {
										clearInterval(that.codeInterVal)
										that.codeInterVal = null
									}
								}
							}, 1000)
						} else {
							uni.showModal({
								content: '验证码发送失败',
								showCancel: true
							})
						}
					},
					fail(e) {
						uni.showModal({
							content: '验证码发送失败',
							showCancel: false
						})
					},
					complete() {
						uni.hideLoading()
					}
				}
				app.request(params);
			},
			// 提交表单信息
			saveFormId: function(e) {
				let that = this;
				let data = e.detail.value;
				let type = this.type;
				let url = "student/selstudent";
				if (type == 2) {
					url = "teacher/selteacher";
				}
				//if (data.code != "" && data.code == that.verifycode) {
				if (1) {
					let params = {
						url: url,
						type: 'POST',
						data: {							
							username: data.name,
							nickName: that.nickName,
							avatarName: "weixin",
							avatarUrl: that.avatarUrl,
							phone: data.phone,
							gender: that.gender,
							wxOpenId: that.openid
						},
						sCallback: function(res) {
							console.log(res);
							if (res.verifyStatus == "0") {
								uni.showToast({
									title: '信息提交成功，等待审核！',
									icon: 'none',
									type: 'warning'
								})
								uni.reLaunch({
									url: '/pages/perfect_info/perfect_info?type=' + type
								});
							} else {
								uni.showToast({
									title: '认证完成，等待跳转',
									icon: 'none',
									type: 'warning'
								});		
								that.wxlogin(that.openid);						
							}							 
						}
					}
					app.request(params);
				} else {
					uni.showModal({
						content: '验证码错误',
						showCancel: false
					})
				}
				console.log(e)
			},
			wxlogin: function(openid) {
				let that = this;
				var params = {
					url: 'users/wxlogin',
					type: 'POST',
					data: {
						openid: openid
					},
					sCallback: function(res) {
						console.log(res);
						that.userInfo = res.user;
						that.userInfo["token"] = res.token;	
						that.setUser(that.userInfo);	
						uni.reLaunch({//信息更新成功后跳转到小程序首页
							url: '/pages/home/home'
						});	
					}
				}
				app.request(params);
			},
			//获取认证图片
			srcX:function(){
				return getApp().globalData.Link+'file/system/认证.jpg';
			}
		}
	}
</script>

<style>
	.image-bg {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.page-bg {
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sub-bg {
		width: 544rpx;
		height: 730rpx;
		background: rgba(0, 0, 0, 0.45);
		border-radius: 18rpx;
	}

	.avater {
		margin-left: 212rpx;
		margin-top: 20rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.tip {
		width: 100%;
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
	}

	.section {
		margin-left: 49rpx;
		margin-top: 20rpx;
		width: 446rpx;
		min-height: 76rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.form_button {
		background-color: white;
		padding: 0;
		margin: 0;
		text-align: left;
		color: rgb(51, 51, 51);
	}

	.section input {
		margin-left: 32rpx;
		width: 400rpx;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
	}

	.send-code-btn {
		margin-left: 260rpx;
		margin-top: -58rpx;
		height: 56rpx;
		width: 180rpx;
		font-size: 32rpx;
		text-align: center;
		color: #555555;
		z-index: auto;
	}

	.placeholder,
	.address-placeholder {
		color: rgb(187, 187, 187);
	}

	.address-bg {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.address-normal {
		margin-left: 32rpx;
		width: 360rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.department {
		color: rgb(187, 187, 187);
		margin-left: 32rpx;
		width: 360rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.address-arrow {
		margin-left: 5rpx;
		margin-top: 23rpx;
		width: 15rpx;
		height: 29rpx;
	}

	button {
		margin-left: 49rpx;
		margin-top: 32rpx;
		width: 446rpx;
		height: 76rpx;
		background-color: rgb(90, 160, 245);
		border-radius: 16rpx;
		color: white;
		font-size: 32rpx;
	}

	.tip {
		height: 60rpx;
		padding-top: 52rpx;
	}
</style>
